<template>
  <div :class="`bar-height-layout ${$store.state.topClass || ''}`" :style="cssVars">
    <div class="bar-placeholder"></div>
    <div class="page-container">
      <Nuxt />
    </div>
  </div>
</template>

<script>
export default {
  name: 'BarHeightLayout',
  computed: {
    // css 变量，可以在 style 标签中使用
    cssVars() {
      return {
        '--bar-height': `${this.$store.state.barHeight}px`,
      };
    },
  },
  mounted() {
    let barHeight = +(this.$route.query.barHeight || this.$cookiz.get('barHeight') || 0);
    const ffrom = this.$route.query.ffrom || this.$cookiz.get('ffrom');
    // 安卓的barHeight单位不是直接对应像素，需要除devicePixelRatio转成像素单位
    if (process.client && ffrom && ffrom.indexOf('android') > -1) {
      barHeight = barHeight / window.devicePixelRatio;
    }
    // 绑定到store上，提供响应式数据给其他页面使用
    this.$store.commit('setBarHeight', barHeight);

    const isFromApp = this.$route.query.isFromApp || this.$cookiz.get('isFromApp');
  },
};
</script>

<style lang="less" scoped>
.bar-height-layout {
  height: 100%;
  display: flex;
  flex-direction: column;
  .bar-placeholder {
    height: var(--bar-height);
  }
  .page-container {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none;
  }
  ::v-deep .van-nav-bar--fixed {
    position: fixed;
    top: var(--bar-height);
  }
}
</style>
